<template>
  <div class="auth-box">
    <el-row type="flex" align="middle" justify="space-between">
      <!-- 状态切换栏 -->
      <el-radio-group v-model="status" @change="handleStatusChange" style="margin-bottom: 15px">
        <el-radio-button :label="0" class="status-button">角色/权限</el-radio-button>
        <el-radio-button :label="1" class="status-button">员工管理</el-radio-button>
      </el-radio-group>

      <!-- 门店选择下拉框 -->
      <div class="employee-top" v-if="status === 1">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
          <el-form-item>
            <el-select
              v-model="selectedStore"
              placeholder="选择门店"
              clearable
              style="width: 180px;"
            >
              <el-option v-for="store in stores" :key="store.id" :label="store.name" :value="store.id"></el-option>
            </el-select>
          </el-form-item>

          <!-- 搜索框 -->
          <el-form-item>
            <el-input v-model="searchQuery" placeholder="姓名/手机号/身份证号" clearable></el-input>
          </el-form-item>

          <!-- 添加员工按钮 -->
          <el-form-item>
            <el-button type="primary" @click="handleEmployee">添加员工</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="role-top" v-if="status === 0">
        <!-- 添加角色按钮 -->
        <el-button type="primary" @click="handleRoleEdit" style="margin-bottom: 5px">添加角色</el-button>
      </div>


    </el-row>
    <!-- 根据status动态展示内容 -->
    <div v-if="status === 0">
      <!-- 角色/权限管理内容 -->
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          type="index"
          width="50"
          label="序号"
        >
        </el-table-column>
        <el-table-column
          fixed
          prop="name"
          label="角色名称"
        >
        </el-table-column>
        <el-table-column
          prop="account"
          label="使用账号"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-value="1"
              inactive-value="0"
              @change="toggleStatus(scope.row)"
              active-color="#13ce66"
              inactive-color="#ff4949">
              >

            </el-switch>
            <span>{{ scope.row.status === 0 ? '关闭' : '启用' }}</span>
          </template>
        </el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button @click="handleRoleEdit(scope.row)" type="text" size="small">查看/编辑</el-button>
            <el-button @click="confirmRoleDelete(scope.row.id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </div>
    <div v-else>
      <!-- 员工管理内容 -->
      <el-table
        :data="dataList"
        border
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          fixed
          prop="sellerName"
          label="商家"
          width="150">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="用户名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="mobile"
          label="手机"
          width="120">
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱"
          width="300">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="120">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="220">
          <template slot-scope="scope">
            <el-button @click="handleEmployee(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="handleClick(scope.row)" type="text" size="small">关联房间</el-button>
            <el-button @click="confirmDelete(scope.row.id)" type="text" size="small">删除</el-button>
            <el-button @click="handleUpdatePwd(scope.row)" type="text" size="small">修改密码</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </div>

    <!--    员工添加或编辑弹窗-->
    <el-dialog :title="dialogTitle" :visible.sync="saveEditFormVisible" width="80%" @close="closeDialog('save')">
      <el-form label-width="100px" ref="saveEditForm" :model="saveEditForm">

        <!-- 基本信息标题 -->
        <el-row>
          <h3>基本信息</h3>
        </el-row>

        <!-- 左右布局 -->
        <el-row :gutter="20">
          <!-- 左边部分 -->
          <el-col :span="12">
            <el-form-item label="* 员工姓名">
              <el-input v-model="saveEditForm.name" placeholder="请输入员工姓名"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input v-model="saveEditForm.phone" placeholder="请输入手机号码"></el-input>
            </el-form-item>
            <el-form-item label="身份证号">
              <el-input v-model="saveEditForm.idCard" placeholder="请输入身份证号"></el-input>
            </el-form-item>
            <el-form-item label="登录密码">
              <el-input v-model="saveEditForm.password" placeholder="请输入登录密码" type="password"></el-input>
            </el-form-item>
            <el-form-item label="是否可进行优惠操作">
              <el-switch v-model="saveEditForm.discountPermission"></el-switch>
            </el-form-item>

            <el-form-item v-if="saveEditForm.discountPermission">
              <el-radio-group v-model="discountOption">
                <el-radio :label="1">优惠限额</el-radio>
                <el-radio :label="2">优惠比例上限</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="优惠限额" v-if="saveEditForm.discountPermission && discountOption === 1">
              <el-input style="width: 100px" v-model="saveEditForm.discountLimit" placeholder="请输入金额"></el-input>
              元
            </el-form-item>

            <el-form-item label="优惠比例上限" v-if="saveEditForm.discountPermission && discountOption === 2">
              <el-input style="width: 120px" v-model="saveEditForm.maxDiscountRate"
                        placeholder="请输入优惠比例"></el-input>
              %
            </el-form-item>
          </el-col>

          <!-- 右边部分 -->
          <el-col :span="12">
            <el-form-item label="员工编号">
              <el-input v-model="saveEditForm.employeeId" placeholder="请输入员工编号"></el-input>
            </el-form-item>
            <el-form-item label="联系地址">
              <el-input v-model="saveEditForm.address" placeholder="请输入联系地址"></el-input>
            </el-form-item>
            <el-form-item label="紧急联系人">
              <el-input v-model="saveEditForm.emergencyContact" placeholder="请输入紧急联系人"></el-input>
            </el-form-item>
            <el-form-item label="紧急联系方式">
              <el-input v-model="saveEditForm.emergencyContactPhone" placeholder="请输入紧急联系方式"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 权限设置 -->
        <el-row>
          <h3>权限设置</h3>
        </el-row>
        <el-form-item label="管理门店">
          <el-select
            v-model="saveEditForm.selectedStore"
            placeholder="选择门店"
            clearable
            style="width: 240px;"
          >
            <el-option v-for="store in stores" :key="store.id" :label="store.name" :value="store.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="* 选择角色权限">
          <el-checkbox-group v-model="saveEditForm.selectedPermissions">
            <!-- 使用 v-for 循环渲染角色选项 -->
            <el-row :gutter="20">
              <el-col :span="4" v-for="role in roles" :key="role.id">
                <el-checkbox-button :label="role.name">{{ role.name }}</el-checkbox-button>
              </el-col>
            </el-row>
          </el-checkbox-group>
        </el-form-item>

        <div style="margin: 40px 100px ">
          <!-- 状态切换栏 -->
          <el-radio-group v-model="empStatus" @change="handleEmpStatusChange" style="margin-bottom: 15px">
            <el-radio-button :label="0" class="status-button">电脑端权限</el-radio-button>
            <el-radio-button :label="1" class="status-button">手机端权限</el-radio-button>
          </el-radio-group>
        </div>


        <!-- 电脑端权限内容 -->
        <div v-if="empStatus === 0">
          <!-- 这里添加与电脑端权限相关的内容 -->
          <p>这是电脑端权限的内容</p>
        </div>

        <!-- 手机端权限内容 -->
        <div v-if="empStatus === 1">
          <!-- 这里添加与手机端权限相关的内容 -->
          <p>这是手机端权限的内容</p>
        </div>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog('save')">取消</el-button>
        <el-button size="small" type="primary" :disabled="buttonsDisabled" @click="submitEmpForm('saveEditForm')">保存
        </el-button>
      </div>
    </el-dialog>


    <!--    角色编辑或添加-->

    <el-dialog :title="dialogTitle" :visible.sync="roleEditFormVisible" width="80%" @close="closeDialog('roleEdit')">
      <el-form label-width="120px" ref="saveEditForm" :model="saveRoleEditForm">

        <!-- 左右布局 -->
        <el-row :gutter="20">
          <!-- 左边部分 -->
          <el-col :span="12">
            <el-form-item label="* 角色名称姓名">
              <el-input v-model="saveRoleEditForm.name" placeholder="请输入员工姓名"></el-input>
            </el-form-item>
          </el-col>
          <!-- 右边部分 -->
          <el-col :span="12">
          </el-col>
        </el-row>

        <el-form-item label="* 选择角色权限">

          <div style="margin: 10px ">
            <!-- 状态切换栏 -->
            <el-radio-group v-model="empStatus" @change="handleEmpStatusChange" style="margin-bottom: 15px">
              <el-radio-button :label="0" class="status-button">电脑端权限</el-radio-button>
              <el-radio-button :label="1" class="status-button">手机端权限</el-radio-button>
            </el-radio-group>
          </div>
        </el-form-item>

        <!-- 电脑端权限内容 -->
        <div v-if="empStatus === 0">
          <!-- 这里添加与电脑端权限相关的内容 -->
          <p>这是电脑端权限的内容</p>
        </div>

        <!-- 手机端权限内容 -->
        <div v-if="empStatus === 1">
          <!-- 这里添加与手机端权限相关的内容 -->
          <p>这是手机端权限的内容</p>
        </div>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog('roleEdit')">取消</el-button>
        <el-button size="small" type="primary" :disabled="buttonsDisabled" @click="submitRoleForm('saveEditForm')">保存
        </el-button>
      </div>
    </el-dialog>


    <el-dialog :visible.sync="updatePwdFormVisible" width="40%" @close="closeDialog('updatePwd')">

      <div style="text-align: center; margin-bottom: 20px">
        <h2 style="margin-top:-20px ">修改密码</h2>
        <div
          style="margin: 80px auto 10px; border-radius: 50%; width: 140px; height: 140px; background-color: #f5f5f5; display: flex; align-items: center; justify-content: center;">
          <i class="el-icon-user-solid" style="font-size: 100px;"></i>

        </div>
        <p style="margin-bottom: 50px; font-size: 16px;">{{ updatePwdForm.name }}</p>

      </div>

      <el-form :model="updatePwdForm" style="display: flex; flex-direction: column; align-items: center;">

        <el-form-item>
          <template #label>
            <span style="color: red;">*</span> 原密码
          </template>
          <el-input
            v-model="updatePwdForm.originalPwd"
            :type="showPassword ? 'text' : 'password'"
            style="width: 200px;"
          >
            <i slot="suffix" class="el-icon-view" @click="togglePasswordVisibility" style="cursor: pointer;"></i>
          </el-input>
        </el-form-item>

        <el-form-item>
          <template #label>
            <span style="color: red;">*</span> 新密码
          </template>
          <el-input
            v-model="updatePwdForm.newPwd"
            :type="showPassword ? 'text' : 'password'"
            style="width: 200px;"
          >
            <i slot="suffix" class="el-icon-view" @click="togglePasswordVisibility" style="cursor: pointer;"></i>
          </el-input>
        </el-form-item>

        <el-form-item>
          <template #label>
            <span style="color: red;margin-left: -15px">*</span> 确认密码
          </template>
          <el-input
            v-model="updatePwdForm.confirmPwd"
            :type="showPassword ? 'text' : 'password'"
            style="width: 200px;"
          >
            <i slot="suffix" class="el-icon-view" @click="togglePasswordVisibility" style="cursor: pointer;"></i>
          </el-input>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer" style="display: flex; justify-content: center; gap: 60px;">
        <el-button @click="closeDialog('updatePwd')">取消</el-button>
        <el-button type="primary" @click="submitUpdatePwdForm(updatePwdForm)">确认</el-button>
      </div>
    </el-dialog>

    <!--    员工删除提示框-->
    <el-dialog
      :visible.sync="deleteDialogVisible"
      width="30%"
      title="确认删除"
      @close="closeDialog('deleteEmp')"
    >
      <span>是否确定删除该员工？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitDelete">删除</el-button>
      </span>
    </el-dialog>

    <!--    角色删除提示框-->
    <el-dialog
      :visible.sync="deleteRoleVisible"
      width="30%"
      title="确认删除"
      @close="closeDialog('deleteRole')"
    >
      <span>是否确定删除该角色？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteRoleVisible = false">取消</el-button>
        <el-button type="primary" @click="submitRoleDelete">删除</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import AddOrUpdate from "./hotelselleremployee-add-or-update";
import rolu from "./rolu";

export default {
  data() {
    return {
      status: 0, //0是 角色权限管理 1是用户管理
      empStatus: 0, //0是电脑端 1是手机端
      roleStatus: 0, //0是电脑端 1是手机端
      roluVisible: false,
      dialogTitle: '', // 动态标题
      loading: false,
      sellerIds: [],
      platformSeller: [],
      showPassword: false, // To toggle password visibility
      buttonsDisabled: false,
      dataForm: {
        name: "",
        mobile: "",
        userName: "",
        email: "",
        key: ""
      },
      //角色权限数据
      tableData: [{
        id: '1',
        name: '王小虎',
        account: '1',
        status: '1',
      }, {
        id: '2',
        name: '王嘉尔',
        account: '2',
        status: '0',

      }, {
        id: '3',
        name: '王二虎',
        account: '2',
        status: '1',

      }, {
        id: '4',
        name: '李小龙',
        account: '5',
        status: '0',
      }],
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      saveEditFormVisible: false, //控制添加页面显示与隐藏
      updateEditFormVisible: false, //控制编辑页面显示与隐藏
      updatePwdFormVisible: false,
      deleteRoleVisible: false,
      deleteDialogVisible: false,
      roleEditFormVisible: false, //添加/编辑角色弹窗显示
      deleteId: null, // 存储要删除的id
      stores: [
        {id: 1, name: "门店1"},
        {id: 2, name: "门店2"},
        {id: 3, name: "门店3"}
      ],

      searchQuery: "",

      saveRoleEditForm: {
        name: '',
      },
      saveEditForm: {
        sellerName: '',
        name: '',
        UserName: '',
        mobile: '',
        email: '',
        createTime: '',
        employeeId: '',
        discountPermission: false,
        discountLimit: '',
        maxDiscountRate: '',
        selectedStore: null,
        selectedPermissions: [],
      },

      updatePwdForm: {
        originalPwd: '',
        newPwd: '',
        confirmPwd: '',
        name: '',
      },
      selectedPermissions: [],
      discountOption: 1, // 默认选中“优惠限额”

      //添加/编辑员工的角色多选
      roles: [
        {id: 1, name: '角色1'},
        {id: 2, name: '角色2'},
        {id: 3, name: '角色3'},
        {id: 4, name: '角色4'},
        {id: 5, name: '角色5'},
        {id: 6, name: '角色6'},
        {id: 7, name: '角色7'},
        {id: 8, name: '角色8'},
        {id: 9, name: '角色9'},
        {id: 10, name: '角色10'},
      ],
    };
  },
  components: {
    AddOrUpdate, rolu
  },
  activated() {
    this.getDataList();
    this.remoteMethod();
  },
  methods: {

    toggleStatus(row) {
      const updatedStatus = row.status;

      this.$http({
        url: this.$http.adornUrl("/hotel/hotelselleremployee/status"),
        method: "post",
        data: {id: row.id, status: updatedStatus}
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.$message.success(`状态已更新为 ${updatedStatus === 1 ? '启用' : '关闭'}`);
        } else {
          this.$message.error(data.msg);
        }
      })
        .catch(error => {
          this.$message.error('状态更新失败');
          // Revert status on error
          row.status = updatedStatus === 1 ? 0 : 1;
        });
    },

    closeDialog(dialog) {
      if (dialog === 'save') {
        this.saveEditFormVisible = false;
      } else if (dialog === 'updatePwd') {
        this.updatePwdFormVisible = false;
      } else if (dialog === 'deleteEmp') {
        this.deleteDialogVisible = false;
      } else if (dialog === 'deleteRole') {
        this.deleteRoleVisible = false;
      } else if (dialog === 'roleEdit') {
        this.roleEditFormVisible = false;
      }
    },
    handleUpdatePwd(row) {
      this.updatePwdFormVisible = true;
      this.updatePwdForm = {...row};
    },

    handleRoleEdit(row) {
      console.log("row:", row);
      this.roleEditFormVisible = true;
      this.saveRoleEditForm = {};
      if (row.id) {
        // 编辑操作
        this.dialogTitle = '编辑角色';
        // 将 row 的数据赋值到 saveEditForm 中
        this.saveRoleEditForm = {...row};
      } else {
        // 添加操作
        this.dialogTitle = '添加角色';
      }
    },

    handleEmployee(row) {
      console.log("row:", row);
      this.saveEditFormVisible = true;

      this.saveEditForm = {
        sellerName: '',
        name: '',
        UserName: '',
        mobile: '',
        email: '',
        createTime: '',
        employeeId: '',
        discountPermission: false,
        discountLimit: '',
        maxDiscountRate: '',
        selectedStore: null,
        selectedPermissions: [],
      };
      if (row.id) {
        // 编辑操作
        this.dialogTitle = '编辑员工';
        // 将 row 的数据赋值到 saveEditForm 中
        this.saveEditForm = {...row};
      } else {
        // 添加操作
        this.dialogTitle = '添加员工';
        console.log("进入添加员工了")
      }
    },

    submitEmpForm() {
      // this.$refs["dataForm"].validate(valid => {
      //   if (valid) {
      this.$http({
        url: this.$http.adornUrl(
          `/hotel/hotelselleremployee/saveOrUpdate`
        ),
        method: "post",
        data: this.saveEditForm
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.visible = false;
              this.$emit("refreshDataList");
            }
          });
        } else {
          this.$message.error(data.msg);
        }
      })
        .catch(error => {
          this.$message.error('提交失败');
          // Revert status on error
        });

      // }
      // });
    },
    // 点击删除按钮时触发，显示确认对话框并传递id
    confirmDelete(id) {
      this.deleteId = id;
      this.deleteDialogVisible = true;
    },
    confirmRoleDelete(id) {
      this.deleteId = id;
      this.deleteRoleVisible = true;
    },
    // 员工删除操作
    submitDelete(id) {
      // 在这里执行删除操作，比如调用API并传递deleteId
      console.log("删除的ID是:", this.deleteId);

      this.$http({
        url: this.$http.adornUrl("/hotel/hotelselleremployee/delete"),
        method: "post",
        data: {id: id}
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.$message.success(`删除成功`);
        } else {
          this.$message.error(data.msg);
        }
      })
        .catch(error => {
          this.$message.error('提交失败');
          // Revert status on error
        });

      // 完成删除操作后，关闭对话框并清除deleteId
      this.deleteDialogVisible = false;
      this.deleteId = null;
    },

    //角色删除
    submitRoleDelete(id) {
      // 在这里执行删除操作，比如调用API并传递deleteId
      console.log("删除的角色是:", this.deleteId);

      this.$http({
        url: this.$http.adornUrl("/hotel/hotelselleremployee/roledelete"),
        method: "post",
        data: {id: id}
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.$message.success(`状态已更新为 ${updatedStatus === 1 ? '启用' : '关闭'}`);
        } else {
          this.$message.error(data.msg);
        }
      })
        .catch(error => {
          this.$message.error('提交失败');
          // Revert status on error
        });
      // 完成删除操作后，关闭对话框并清除deleteId
      this.deleteDialogVisible = false;
      this.deleteId = null;
    },

    togglePasswordVisibility() {
      this.showPassword = !this.showPassword;
    },

    submitUpdatePwdForm(form) {
      // 修改密码提交
      // 在这里执行删除操作，比如调用API并传递deleteId
      console.log("删除的ID是:", this.deleteId);

      this.$http({
        url: this.$http.adornUrl("/hotel/hotelselleremployee/delete"),
        method: "post",
        data: form
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.$message.success(`状态已更新为 ${updatedStatus === 1 ? '启用' : '关闭'}`);
        } else {
          this.$message.error(data.msg);
        }
      })
        .catch(error => {
          this.$message.error('提交失败');
          // Revert status on error
        });

      // 完成删除操作后，关闭对话框并清除deleteId
      this.deleteDialogVisible = false;
      this.deleteId = null;
    },
    handleEmpStatusChange(value) {
      console.log("切换到状态:", value);
      // 这里可以根据切换的状态执行其他操作
    },
    handleStatusChange(value) {
      console.log("当前状态:", value);
      this.getDataList();
    },

    handleRoleStatusChange(value) {
      console.log("切换到状态:", value);
      // 这里可以根据切换的状态执行其他操作
    },

    addEmployee() {
      console.log("添加员工");

    },
    selectSeller(id, value) {
      this.getDataList()
    },
    //加载平台商家数据
    remoteMethod(query) {
      if (this.isAuth('hotel:hotelseller:list')) {
        this.loading = true;
        this.$http({
          url: this.$http.adornUrl("/hotel/hotelseller/platformSeller"),
          method: "get",
          params: this.$http.adornParams({
            sellerName: query
          })
        }).then(({data}) => {
          this.loading = false;
          if (data && data.code === 0) {
            this.platformSeller = data.page.list;
          } else {
            this.$message.error(data.msg);
          }
        });
      }
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      var ids = ""
      if (this.sellerIds) {
        this.sellerIds.forEach((item, index) => {
          ids += item + ","
        })
        ids = ids.substring(0, ids.length - 1)
      }
      this.$http({
        url: this.$http.adornUrl("/hotel/hotelselleremployee/list"),
        method: "get",
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          ...this.dataForm,
          ids: ids,
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list;
          this.totalPage = data.page.totalCount;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    // 角色
    roluHandle(id) {
      this.roluVisible = true;
      this.$nextTick(() => {
        this.$refs.rolu.init(id);
      });
    },
  }
};
</script>

<style scoped>
.auth-box {
  padding: 10px;
//background-color: #f5f7fa; border-radius: 4px; margin-bottom: 20px;
}
</style>
